<!-- 专题 -->
<template>
  <div class="topic">
    <ul>
      <li v-for="item in topicArr" :key="item.id">
        <img v-lazy="item.scene_pic_url" alt="" />
        <p>{{ item.title }}</p>
        <p>{{ item.subtitle }}</p>
        <span>{{ item.price_info | formatPrice }}</span>
      </li>
    </ul>
    <!-- 分页 -->
    <van-pagination
      v-model="currentPage"
      :page-count="totalPages"
      mode="simple"
      @change="changePage"
    />
  </div>
</template>

<script>
import { getTopicList } from "@/utils/https";
export default {
  data() {
    return {
      topicArr: [], // 专题页数据
      currentPage: 1, // 当前页数
      totalPages: "", //总页数
      size: 10,
    };
  },
  created() {
    // 初始化调用
    this.getdata();
  },
  methods: {
    changePage() {
      //   console.log(this.currentPage);
      // 切换页码调用
      this.getdata();
    },
    getdata() {
      //请求数据封装
      getTopicList({ page: this.currentPage, size: this.size }).then((res) => {
        this.topicArr = res.data.data.data;
        this.totalPages = res.data.data.totalPages;
      });
    },
  },
};
</script>
<style lang='less' scoped>
/* @import url(); 引入css类 */
.topic {
  padding-bottom: 100px;
  box-sizing: border-box;
  img {
    width: 100%;
    display: block;
  }
}
</style>